<script>
/* action */
const PERMISSION_PERMIT_FETCH = 'PERMISSION_PERMIT_FETCH';
const MESSAGE_LIST_FETCH = 'MESSAGE_LIST_FETCH';
const MESSAGE_WS_CONNECT = 'MESSAGE_WS_CONNECT';

/* mutation */
const USER_LOGOUT = 'USER_LOGOUT';
import * as types from '@/store/types';

import WorkSpaceQuery from '../../mixins/WorkspaceQuery';

export default {
  name: 'DashBoardNavBar',
  mixins: [WorkSpaceQuery],
  data: () => {
    return {
      selectMenuItem: '',
      activeMenu: 'workspace',
    };
  },
  created() {
    // this.$store.dispatch(PERMISSION_PERMIT_FETCH);
    // this.$store.dispatch(MESSAGE_LIST_FETCH);
    // this.$store.dispatch(MESSAGE_WS_CONNECT);
  },
  methods: {
    click(name) {
      if (name === 'logout') {
        this.$store.dispatch(USER_LOGOUT).then(() => {
          this.$router.replace('/login');
        });
      } else {
        this.activeMenu = name;
        this.$router.push('/' + name);
      }
    },
    select(name) {
      this.activeMenu = name;
      if (name === 'workspace') {
        this.getLastAppData();
        this.$router.push('/workspace/' + this.$store.state.app.appData.id);
      } else if (name === 'sdk') {
        window.open('http://192.168.1.166:8060/highgis-sdk/samples/show/index.html');
      } else {
        this.$router.push('/' + name);
      }
    },
  },
};
</script>

<template>
  <header>
    <img
      src="~assets/dashboard/logo.png"
      alt="logo">
    <Dropdown
      transfer
      @on-click="click">
      <Avatar
        icon="person"
        size="large" />
      <DropdownMenu slot="list">
        <DropdownItem name="userinfo">个人信息</DropdownItem>
        <DropdownItem name="changepwd">修改密码</DropdownItem>
        <DropdownItem name="offlinetask">离线任务</DropdownItem>
        <DropdownItem name="logout">退出登录</DropdownItem>
      </DropdownMenu>
    </Dropdown>
    <Menu
      :active-name="activeMenu"
      mode="horizontal"
      theme="dark"
      @on-select="select">
      <MenuItem name="workspace">
      <Icon type="cube" /> 工作区
      </MenuItem>
      <MenuItem name="app">
      <Icon type="android-apps" /> 应用
      </MenuItem>
      </MenuItem>
      <MenuItem name="case">
      <Icon type="ios-flag" /> 案例
      </MenuItem>
      <Submenu name="material">
        <template slot="title">
          <Icon type="settings" /> 素材
        </template>
        <MenuItem name="datatable">数据表</MenuItem>
        <MenuItem name="materialmap">地图模板</MenuItem>
        <MenuItem name="panel">组件</MenuItem>
        <MenuItem name="dataanalysis">模型计算</MenuItem>
        <MenuItem name="sdk">SDK</MenuItem>
        <MenuItem name="api">API</MenuItem>
        <MenuItem name="apptemplate">应用模板</MenuItem>
      </Submenu>
      <MenuItem name="sysmanager">
      <Icon type="ios-flag" />系统管理</MenuItem>
    </Menu>
  </header>
</template>

<style lang="less" scoped>
header {
  flex: 0 0 100%;
  height: 60px;
  background-color: #495060;
  z-index: 902;

  img {
    float: left;
    margin: 15px 0 0 30px;
  }

  .k-menu {
    float: right;
  }

  .k-dropdown {
    float: right;
    margin: 10px 28px;
  }
}
</style>
